<template>
  <view class="list-item me-card">
    <view class="main" @click="$nav.to('/pages/goods-detail/goods-detail', {
                id: item._id
            })">
      <u--image :showLoading="true" :src="item.pictures[0].url" width="80px" height="80px" @click="click">
      </u--image>
      <view class="info">
        <view class="title two-line-clamp">{{item.title}}</view>
        <view class="price">￥{{item.price}}</view>
      </view>
    </view>
    <view class="footer">
      <text>创建时间：</text>
      <text>{{item.createTime}}</text>
    </view>
    <view class="handle">
      <view class="btn" v-if="[goodsState.unsanctioned, goodsState.published].includes(item.state)" @click="edit(item._id)">
        <u-button type="primary" size="mini" text="编辑"></u-button>
      </view>
      <view v-if="item.state === goodsState.suspensive" class="btn" @click="start(item._id)">
        <u-button type="primary" size="mini" text="上架"></u-button>
      </view>
      <view class="btn" @click="pause(item._id)">
        <u-button v-if="item.state === goodsState.published" type="primary" size="mini" text="下架"></u-button>
      </view>
      <view class="btn" @click="del(item._id)">
        <u-button type="error" text="删除" size="mini"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    goodsState
  } from '@/enum/index.js'
  export default {
    props: {
      item: Object
    },
    data () {
      return {
        goodsState: goodsState
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;
  
    .main {
      display: flex;
    }
  
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10rpx 20rpx;
    }
  
    .handle {
      margin-top: 20rpx;
      display: flex;
  
      .btn {
        // display: inline-block;
        // width: 200rpx;
        // width: 20%;
        margin-right: 20rpx;
      }
    }
  
    .footer {
      color: $uni-text-color-grey;
      font-size: $me-text-min-size;
    }
  }
</style>